<!--订单列表-->
<template>
  <div style="height:6vh;background-color:#fff;padding: 10px 20px;">
    <span style="line-height: 60px;font-size: 20px;">订单管理</span>
  </div>

  <!--编辑订单弹窗-->
  <el-dialog
      :title="dialogTitle"
      style="width: 1000px;padding:40px;"
      v-model="dialogVisible"
      :before-close="handleClose"
  >
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="订单id">
            <el-input v-model="saveOrderForm.id" :disabled="saveOrderForm.id!=null"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商品名称">
            <el-input  v-model="saveOrderForm.name" :disabled="saveOrderForm.id!=null"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="商品规格">
            <el-input  v-model="saveOrderForm.price" :disabled="saveOrderForm.id!=null"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="购买数量">
            <el-input v-model="saveOrderForm.num"></el-input>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="价格">
            <el-input  v-model="saveOrderForm.price"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="订单状态">
            <el-input v-model="saveOrderForm.status"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="地址">
            <el-input v-model="saveOrderForm.address"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="saveOrder">保存</el-button>
    </template>
  </el-dialog>



  <!-- 订单数据表格卡片 -->
  <el-card style="margin: 20px;">
    <el-table :data="orderArr">
      <el-table-column label="订单id" type="index" width="80" align="center"></el-table-column>
      <el-table-column label="商品名称" prop="name"  align="center"></el-table-column>
      <el-table-column label="商品规格" prop="norms" align="center"></el-table-column>
      <el-table-column label="商品价格" prop="price" align="center"></el-table-column>
      <el-table-column label="购买数量" prop="num" align="center"></el-table-column>
      <el-table-column label="订单状态" prop="status" align="center"></el-table-column>
      <el-table-column label="收货地址" prop="address" align="center"></el-table-column>
      <el-table-column label="备注" prop="notes" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" @click="editOrder(scope.row.id)">编辑</el-button>
          <el-button link type="primary" @click="deleteOrder(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

</template>
<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";

//获取当前商户的id
const user = ref(getUser());
const userid = user.value.id;

//定义数组用来保存用户表格数据
const orderArr = ref([]);

//定义对象用来保存编辑订单表单中收集的数据
const saveOrderForm = ref({
  id:'',
  name:'',
  norms:'',
  price:'',
  num:'',
  status:'',
  address:'',
  Adminid:userid,
});

//定义变量用来控制弹窗是否出现
const dialogVisible = ref(false);

//定义加载订单数据的方法
const loadOrder = ()=>{
  axios.get(BASE_URL+'/order//Admin/selectOrderById/'+userid)
      .then((response)=>{
        if(response.data.state == 2002){
          orderArr.value = response.data.data;
          console.log(orderArr.value);
        }else{
          ElMessage.error(response.data.message);
        }
      })
}

onMounted(()=>{
  loadOrder();
})

//定义编辑商品的方法
const editOrder = (id)=>{
  dialogVisible.value = true;
  //根据当前待编辑订单的id,回显此商品的数据
  axios.get(BASE_URL+'/order/Admin/selectOrderByOrderId/'+id).then((response)=>{
    if(response.data.state == 2002){
      saveOrderForm.value = response.data.data[0];
    }else{
      ElMessage.error(response.data.message);
    }
  })
}
//定义关闭弹窗的方法
const handleClose = ()=>{
  if(confirm('您确认要关闭本弹窗吗?')){
    dialogVisible.value = false;
  }
}


//定义一个保存订单的方法
const saveOrder = ()=>{
  axios.post(BASE_URL+'/order/Admin/updateOrder',saveOrderForm.value)
      .then((response)=>{
        if (response.data.state == 2002){
          ElMessage.success(response.data.message);
          dialogVisible.value = false;
          loadOrder();
        }else{
          ElMessage.error(response.data.message);
        }
      })
}
</script>


<style scoped>

</style>